<template>
  <div class="view-home">
    <div class="top-features">
      <button @click="scanWireless" class="xx-button">
        <span>扫描局域网</span>
        <span v-if="scanning">{{ scanPersent }}%</span>
      </button>
    </div>

    <template v-if="devices.length > 0">
      <android-device-item v-for="device in devices" :key="device.id" :device="device" />
    </template>
    <div v-else class="empty-section">
      <p>
        <i class="iconfont icon-emptystate"></i>
      </p>
      <span>没有发现设备</span>
    </div>
  </div>
</template>

<script lang="ts">
import { VueComponent } from '@/vue/vue-component';
import { Component } from 'vue-property-decorator';
import { AndroidDevice } from '@/main/adb/android-device';
import { ipcRenderer, IpcRendererEvent } from 'electron';
import AndroidDeviceItem from '@/components/android-device-item';
import {
  ActionFunc,
  CloseDeviceEvent,
  OpenDeviceErrorEvent,
  OpenDeviceSuccessEvent,
  QueryDeviceEvent
} from '@/type/typings';
import { Action } from 'vuex-class';

@Component({
  name: 'home',
  components: { AndroidDeviceItem }
})
export default class Home extends VueComponent {
  devices: AndroidDevice[] = [];
  loading = false;
  scanPersent = 0;
  scanning = false;
  private stoped = true;
  private _queryTimeout?: any;

  @Action('device/addOpenedDevice') addOpenedDevice!: ActionFunc<string>;
  @Action('device/removeOpenedDevice') removeOpenedDevice!: ActionFunc<string>;

  queryDevice() {
    if (this.stoped) {
      return;
    }
    ipcRenderer.send('device-query');
  }

  startQuery() {
    if (this.stoped) {
      this.stoped = false;
      this.queryDevice();
    }
  }

  stopQuery() {
    clearTimeout(this._queryTimeout);
    this.stoped = true;
  }

  queryDeviceCallback(_: IpcRendererEvent, event: QueryDeviceEvent) {
    if (event.changed) {
      this.devices = event.devices || [];
    }
    this._queryTimeout = setTimeout(this.queryDevice, 600);
  }

  onDeviceOpenSuccess(_: IpcRendererEvent, event: OpenDeviceSuccessEvent) {
    this.addOpenedDevice(event.deviceId);
  }

  onDeviceOpenError(_: IpcRendererEvent, event: OpenDeviceErrorEvent) {
    // console.log(event.deviceId, '打开失败', event.error);
  }

  onDeviceClose(_: IpcRendererEvent, event: CloseDeviceEvent) {
    this.removeOpenedDevice(event.deviceId);
  }

  onScanProcess(_: IpcRendererEvent, event: { total: number; current: number }) {
    this.scanPersent = Math.round((event.current / event.total) * 100);
  }

  onScanEnd() {
    ipcRenderer.removeListener('scan-process', this.onScanProcess);
    ipcRenderer.removeListener('scan-end', this.onScanEnd);
    this.scanning = false;
  }

  scanWireless() {
    if (this.scanning) {
      return;
    }
    this.scanning = true;
    this.$nextTick(() => {
      ipcRenderer.on('scan-process', this.onScanProcess);
      ipcRenderer.on('scan-end', this.onScanEnd);
      ipcRenderer.send('scan-device');
    });
  }

  mounted() {
    ipcRenderer.on('device-query-success', this.queryDeviceCallback);

    ipcRenderer.on('open-success', this.onDeviceOpenSuccess);
    ipcRenderer.on('open-error', this.onDeviceOpenError);
    ipcRenderer.on('device-close', this.onDeviceClose);

    this.startQuery();
  }

  beforeDestroy() {
    this.stopQuery();
    ipcRenderer.removeListener('device-query-success', this.queryDeviceCallback);

    ipcRenderer.removeListener('open-success', this.onDeviceOpenSuccess);
    ipcRenderer.removeListener('open-error', this.onDeviceOpenError);
    ipcRenderer.removeListener('device-close', this.onDeviceClose);
  }
}
</script>
<style lang="less">
.view-home {
  padding-top: 10px;
  box-sizing: border-box;
  height: 100%;
}

.top-features {
  margin: 0 10px 10px;
}

.empty-section {
  height: calc(100% - 10px - 38px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 0 5px;
  }

  .iconfont {
    transition: all 0.2s;
    font-size: 50px;
  }
}
</style>
